<template>
  <div id="mountNode" v-loading="loading" style="width: 100%;height: 100%;" />
</template>

<script>
import G6 from '@antv/g6'
export default {
  props: {
    chartData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      graph: undefined
    }
  },
  watch: {
    chartData(val) {
      if (val) {
        this.getData(val)
      }
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    getData(val) {
      // if (this.graph) {
      //   this.graph.destroy()
      // }
      this.loading = true
      this.getI18nText(val)
      if (val.name !== null && val.name !== undefined) {
        this.graph.changeData(val)
        if (val.children !== null && val.children !== undefined && val.children.length > 0) {
          this.graph.fitView(0)
        } else {
          this.graph.fitView(320)
        }
      }
      this.loading = false
    },
    getI18nText(data) {
      const unit = this.$t('金额单位')
      if (data !== null && data !== undefined) {
        if (data.remark === 'company') {
          data.desc = this.$t('注册资本') + unit + ': ' + this.moneyFormat(data.desc, 'w')
        } else if (data.remark === 'investment') {
          data.desc = this.$t('投资金额') + unit + ': ' + this.moneyFormat(data.desc, 'w')
        } else {
          data.desc = this.$t('负责人') + ': ' + data.desc
        }
        // 遍历子元素
        if (data.children !== null && data.children !== undefined && data.children.length > 0) {
          data.children.forEach((item) => {
            this.getI18nText(item)
          })
        }
      }
    },
    // 初始化关系图
    initChart() {
      // 设置节点
      G6.registerNode('icon-node', {
        draw(cfg, group) {
          const styles = this.getShapeStyle(cfg)
          const { labelCfg = {}} = cfg
          const keyShape = group.addShape('rect', {
            attrs: {
              ...styles,
              x: 0,
              y: 0
            }
          })
          if (cfg.name) {
            var text = ''
            if (cfg.name.length > 15) {
              text = cfg.name.substring(0, 15) + '...'
            } else {
              text = cfg.name
            }
            console.log(text)
            group.addShape('text', {
              attrs: {
                ...labelCfg.style,
                text: text,
                x: 15,
                y: 22
              }
            })
          }
          group.addShape('text', {
            attrs: {
              textBaseline: 'top',
              x: 15,
              y: 32,
              fontSize: 10,
              lineHeight: 40,
              text: cfg.desc,
              fill: 'rgba(0,0,0, 1)'
            },
            name: `desc`
          })
          return keyShape
        }
      }, 'rect')
      // 设置默认的节点样式
      const defaultNodeStyle = {
        fill: '#91d5ff',
        stroke: '#40a9ff',
        radius: 10
      }
      // 设置默认展示的label样式
      const defaultLabelCfg = {
        style: {
          fill: '#000',
          fontSize: 12
        }
      }
      const width = document.getElementById('mountNode').scrollWidth
      const height = document.getElementById('mountNode').scrollHeight || 500
      this.graph = new G6.TreeGraph({
        container: 'mountNode',
        width: width,
        height: height,
        pixelRatio: 2,
        maxZoom: 1.5,
        modes: {
          default: [
            {
              type: 'collapse-expand',
              onChange: function onChange(item, collapsed) {
                const data = item.get('model').data
                data.collapsed = collapsed
                return true
              }
            },
            'drag-canvas',
            'zoom-canvas'
          ]
        },
        defaultNode: {
          type: 'icon-node',
          size: [200, 40],
          style: defaultNodeStyle,
          labelCfg: defaultLabelCfg
        },
        defaultEdge: {
          type: 'cubic-horizontal',
          style: {
            stroke: '#A3B1BF'
          }
        },
        layout: {
          type: 'compactBox',
          direction: 'H',
          getHeight: function getHeight() {
            return 40
          },
          getWidth: function getWidth() {
            return 66
          },
          getVGap: function getVGap() {
            return 10
          },
          getHGap: function getHGap() {
            return 100
          },
          getSide: d => {
            if (d) {
              return 'left'
            }
            return 'left'
          }
        }
      })

      this.graph.node(function(node) {
        return {
          size: [230, 50],
          style: {
            fill: node.remark === 'company' ? '#40a9ff' : '#fff',
            stroke: '#096dd9'
          },
          label: node.name
        }
      })
    }

  }
}
</script>
